<template>
  <div class=".list-pagination dish-management-container">
    <el-card style="margin-top:10px">
      <div slot="header">
        <div class="dish-management-container-header">
          <el-input v-model="packageName" class="input" placeholder="请输入菜品名称" @enter.native="searchPackage">
            <el-button slot="append" icon="el-icon-search" style="padding:0" @click="searchPackage" />
          </el-input>
          <div class="dish-management-container-header-batch-operation">
            <el-link :underline="false" type="danger" @click="handleDelete">批量删除</el-link>
            <el-divider direction="vertical" />
            <el-link :underline="false" type="success" @click="batchStartOrEndSale(1)">批量启售</el-link>
            <el-divider direction="vertical" />
            <el-link :underline="false" type="warning" @click="batchStartOrEndSale(0)">批量停售</el-link>
            <el-button type="primary" size="mini" @click="showAddPackage">新建套餐</el-button>
          </div>
        </div>
      </div>
      <div>
        <el-table
          :data="packageInformation"
          border
          style="width: 100%"
          :row-key="getRowKey"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="55"
          />
          <el-table-column
            prop="name"
            label="套餐名称"
            min-width="100px"
          />
          <el-table-column
            prop="account"
            label="图片"
            width="width"
            align="center"
          >
            <template slot-scope="scope">
              <img :src="formatterImg(scope.row.image)" alt="菜品图片" :onerror="defaultImg">
            </template>
          </el-table-column>
          <el-table-column
            prop="categoryName"
            label="套餐分类"
            width="width"
            align="center"
          />
          <el-table-column
            prop="price"
            label="套餐价"
            width="width"
            align="center"
            :formatter="formatterPrice"
          />
          <el-table-column
            prop="status"
            label="售卖状态"
            width="width"
            :formatter="formatterStatus"
            align="center"
          />
          <el-table-column
            prop="updateTime"
            label="最后操作时间"
            width="width"
            align="center"
          />
          <el-table-column label="操作" align="center" width="150px">
            <template slot-scope="scope">
              <el-link
                size="mini"
                :underline="false"
                @click="handleChange(scope.row)"
              >修改</el-link>
              <el-link
                size="mini"
                type="warning"
                :underline="false"
                @click="handleStartOrStop(scope.row)"
              >{{ formatterStatus(scope.row) =='起售'?'停售':'起售' }}</el-link>
              <el-link
                size="mini"
                type="danger"
                :underline="false"
                @click="handleDelete(scope.row)"
              >删除</el-link>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="paginationInfo.total > 0"
          :total="paginationInfo.total"
          :page.sync="paginationInfo.page"
          :limit="paginationInfo.pageSize"
          @pagination="getTableData"
        />
      </div>
    </el-card>
    <add-package v-if="showPackageDialog" :show.sync="showPackageDialog" :is-edit="isEdit" :set-meal-id="setMealId" />
  </div>
</template>

<script>
import AddPackage from '@/views/packageManagement/components/AddPackage'
import { getSetMealList, deleteSetMeal, batchStartOrStop } from '@/api/package'
import { downloadImg } from '@/api/dish'
import { EventBus } from '@/utils/eventBus'
import pagination from '@/components/pagination'
export default {
  components: { AddPackage, pagination },
  data() {
    return {
      packageName: '',
      packageInformation: [],
      setMealId: '',
      isEdit: false,
      showPackageDialog: false,
      multipleSelection: [],
      paginationInfo: {
        pageSize: 10,
        page: 1,
        total: 0
      },
      defaultImg: 'this.src="' + require('../../assets/defaultImg/noImg.png') + '"'
    }
  },
  created() {
    this.paginationInfo.page = 1
    this.getTableData()
  },
  mounted() {
    EventBus.$on('refetchPackageData', () => {
      this.paginationInfo.page = 1
      this.getTableData()
    })
  },
  methods: {
    async getTableData(obj) {
      if (obj) {
        const { page, limit } = obj
        this.paginationInfo.page = page
        this.paginationInfo.pageSize = limit
      }
      const { page, pageSize } = this.paginationInfo
      const { data } = await getSetMealList({ page, pageSize, name: this.packageName })
      if (data) {
        const { records, total } = data
        this.packageInformation = records || []
        this.paginationInfo.total = total
      }
    },
    searchPackage() {
      this.paginationInfo.page = 1
      this.getTableData()
    },
    showAddPackage() {
      this.showPackageDialog = true
      this.isEdit = false
    },
    formatterStatus(row) {
      return row.status === 1 ? '起售' : '停售'
    },
    formatterImg(name) {
      return downloadImg(name)
    },
    handleUpdateSize(val) {
      this.updateSize(val)
      this.getTableData()
    },
    handleUpdateCurrent(val) {
      this.page.current = val
      this.getTableData()
    },
    getRowKey(row) {
      return row.id
    },
    handleSelectionChange(row) {
      this.multipleSelection = row
    },
    formatterPrice(row) {
      return '￥' + row.price / 100
    },
    batchStartOrEndSale(status) {
      this.$confirm(`${status ? '是否起售所选中的菜品?' : '是否停售所选中的菜品'}`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const ids = this.multipleSelection.map((item) => item.id).join(',')
        console.log(ids)
        if (!ids) {
          this.$message.error('请选择需要修改的套餐')
        }
        const result = await batchStartOrStop({ status, ids })
        if (result?.code) {
          this.$message({
            type: 'success',
            message: '更改成功!'
          })
          this.getTableData()
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleStartOrStop(row) {
      const { status } = row
      this.multipleSelection = [row]
      this.batchStartOrEndSale(status === 1 ? 0 : 1)
    },
    handleDelete(row) {
      console.log(row)
      const ids = row.id ? row.id : this.multipleSelection.map((item) => item.id).join(',')
      if (!ids) {
        this.$message.error('请选择需要删除的套餐')
        return
      }
      this.$confirm('是否删除所选商品', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const res = await deleteSetMeal(ids)
        if (res.code) {
          this.$message.success('删除成功')
          this.getTableData()
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleChange(row) {
      console.log(row)
      this.isEdit = true
      this.setMealId = row.id
      this.showPackageDialog = true
    }
  }
}
</script>

<style lang="scss">
$bg:grey;
.dish-management{
  &-container {
    background-color: $bg;
    margin: 10px;

    img{
      height: 30px;
      width: 30px;
    }

    .el-link{
      margin: 5px;
    }
    &-header{
      display: flex;

      &-batch-operation{
        margin-left: auto;
        .el-button{
          margin-left: auto;
        }
      }

      .input{
        width: 250px;
        .el-button{
          margin: 0 !important;
        }
      }
    }
  }
  &-upload{
    .el-upload{
      display: none;
    }
  }
}
</style>

